<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn">点击发送短信</button>
</body>

</html>

<script>
    //一条段短信的间隔时间是20秒 
    //1.注册点击事件
    //2.设置一个定时器,20秒 按钮的内容显示'重发验证码(xxs)'
    //3.20秒内禁用当前的按钮
    var btn = document.getElementById('btn');
    var delay = 3; //一个倒计时的时间
    btn.onclick = function () {
        console.log(123);

        //点击的时候 禁用当前按钮
        //disabled是true 那么就会禁用按钮 如果false 就不会禁用按钮
        this.disabled = true;
        this.innerText = "重新发送验证码(" + delay + "s)"
        //开始倒计时,把倒计时的秒数展示在按钮之中

        //由于在setInterval函数中得不到正确的this指向,所以我们在这里将this保存起来;
        var _this = this;

       var timer = setInterval(function () {
            // 每隔一秒,delay需要 自减1ß
            delay--
            //更新按钮中间倒计时的秒数
            // console.log(delay);
            // console.log(this);

            //如果delay变成了0 那么要清掉定时器 然后让按钮中间的文字显示'点击发送短信'
            //按钮的禁用要解除
            if(delay===0){
                clearInterval(timer);
                _this.innerText = "点击发送短信"
                _this.disabled = false;
                //将delay的值还原
                delay = 3;
                //中断下面代码的执行
                return 
            }
            _this.innerText = "重新发送验证码(" + delay + "s)"
        }, 1000)
    }


</script>